<template>
	<view class="page">
		<view class="hd">
			<view class="prize-info mc-flex mc-flex-vcenter">
				<image :src="info.activityUrl" mode="widthFix"></image>
				<view class="prize-info-right">
					<view class="prize-name">{{info.activityName}}</view>
					<view class="prize-msg">{{info.price}}{{info.unit||'点券'}}</view>
				</view>
			</view>
		</view>
		<view class="bd">
			<view class="bd-title">填写收货信息</view>
			<view class="found-cells">
				<view class="found-cell">
					<view class="found-label">手机号：</view>
					<input type="number" v-model="phone" maxlength="11" placeholder="请输入您的手机号" />
				</view>
				<view class="found-cell">
					<view class="found-label">游戏区：</view>
					<input type="text" v-model="zone" placeholder="例:IOS QQ区" />
				</view>
				<view class="found-cell">
					<view class="found-label">角色昵称：</view>
					<input type="text" v-model="name" placeholder="所选游戏区的角色昵称" />
				</view>
				<view class="found-cell">
					<view class="found-label">QQ号：</view>
					<input type="text" v-model="qq" placeholder="您的QQ账号" />
				</view>
				<view class="found-cell">
					<view class="found-label">微信号：</view>
					<input type="text" v-model="wx" placeholder="您的微信账号" />
				</view>
			</view>
		</view>
		<view class="msg mc-f13">
			<view class="msg-title mc-red">温馨提示：</view>
			<view class="msg-content mc-g8">
				<view>1.请仔细填写收货信息，如因帐号异常、填写错误等原因无法充值，兑奖不予退还</view>
				<view>2.兑换后请主动联系客服QQ（点击复制）：<text class="mc-blue" @tap="setClipboardData(customerNum)">{{customerNum}}</text></view>
			</view>
		</view>
		<view class="foot-box">
			<view class="mc-space-between mc-flex-vcenter">
				<view class="mc-flex-auto p10-15">
					<view class="mc-f15">价值：<text class="mc-red">{{info.price}}{{info.unit||'点券'}}</text></view>
				</view>
				<form @submit="setFormId" report-submit>
					<button form-type="submit" type="primary" @tap="sumbit">确认兑换</button>
				</form>
			</view>
		</view>
		<c-pop></c-pop>
	</view>
</template>

<script>
	import {
		uniNumberBox
	} from '@dcloudio/uni-ui';
	import {
		mapGetters,
		mapActions
	} from 'vuex';

	let gData = {};
	let _self;
	const showToast = title => {
		uni.showToast({
			title: title || '',
			icon: 'none'
		});
	};
	export default {
		components: {
			uniNumberBox
		},
		data() {
			return {
				id:null,
				info: {},
				code:{},
				customerNum: '743914078',

				phone: '',
				zone: '',
				name: '',
				qq: '',
				wx: ''
			};
		},
		computed: {
			...mapGetters('user', ['_gameInfo']),
			tntegralNum: function() {
				return this._gameInfo.tntegralNum || 0;
			},
			exchangeCoupon: function() {
				return this.info.exchangeCoupon || 0;
			},
			convertible: function() {
				let convertible = 0;
				if (this.tntegralNum && this.exchangeCoupon) {
					convertible = Math.floor(this.tntegralNum / this.exchangeCoupon);
				}
				return convertible;
			},
			total: function() {
				let total = 0;
				if (this.exchangeCoupon) {
					total = this.num * this.exchangeCoupon;
				}
				return total;
			}
		},
		watch: {},
		methods: {
			...mapActions('user', ['gameInfoUp']),
			...mapActions('pop', ['popShow']),
			sumbit() {
				if (!this.phone) {
					showToast('请填写您的手机号码');
					return;
				}
				const remarks = [];
				let phoneStr = '手机号：' + this.phone;
				remarks.push(phoneStr);
				let zoneStr = this.zone ? '游戏区：' + this.zone : '';
				if (zoneStr) remarks.push(zoneStr);
				let nameStr = this.name ? '游戏昵称：' + this.name : '';
				if (nameStr) remarks.push(nameStr);
				let qqStr = this.qq ? 'QQ号：' + this.qq : '';
				if (qqStr) remarks.push(qqStr);
				let wxStr = this.wx ? '微信号：' + this.wx : '';
				if (wxStr) remarks.push(wxStr);
				let remark = remarks.join('，');
				console.log(remark);
				this.$store.dispatch('videoAd/show', {
					success: async () => {
						try {
							await this.$api.draw.receiveDraw({
								remark,
								type:1,
								prizeId: this.id
							});
							this.popShow('CExchangeSuccess');
						} catch (e) {
							console.log(e);
							showToast(e);
						}
					},
					fail: () => {
						showToast('兑换失败');
					}
				});
			},
			// 抽奖详情
			async getDetails() {
				this.info = await this.$api.bargain.getBargainDetail({
					id: this.id
				}) || {}
				console.log(this.info)
			},
			setClipboardData(data) {
				uni.setClipboardData({
					data,
					success: function() {
						showToast('已复制');
					}
				});
			},
			//-------------------------------------------------------
			// 保存二维码
			setFormId(e) {
				this.$store.dispatch('common/formIdListUp', {
					e: e,
					isSave: true
				})
			}
		},
		onLoad(options) {
			_self = this;
			this.id=options.id;
			this.getDetails()
			if (!this._gameInfo) {
				this.gameInfoUp();
			}
		},
		onUnload() {
			gData = {}; /*因为全局变量会保存，再次打开该页面时会造成一些数据错误 */
		},
		onShareAppMessage(res) {
			const num = Math.floor(Math.random() * 6 + 1);
			console.log(num)
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
				this.$util.navigateBack();
				this.popShow();
			}
			return {
				title: '伙伴们，我兑换了奖品，你也快来瞧瞧吧',
				path: '/pages/tabBar/home/index?shareUserId=' + this._gameInfo.userId,
				imageUrl: 'https://miaozhua-test.oss-cn-hangzhou.aliyuncs.com/luckKing/icon/share' + num + '.jpg'
			};
		}
	};
</script>

<style lang="scss" scoped>
	page,
	input,
	textarea {
		font-size: 30upx;
	}

	.page {
		background-color: #f0f0f0;
		padding-bottom: 150rpx;
	}

	.hd {
		padding: 0 30rpx;
		background-color: white;

		.prize-info {
			padding: 20rpx 0;

			image {
				width: 180rpx;
				height: 110rpx;
			}

			.prize-info-right {
				margin-left: 30rpx;
			}

			.prize-name {
				font-size: 30rpx;
				font-weight: bold;
			}

			.prize-msg {
				font-size: 26rpx;
				color: #888888;
				margin-top: 10rpx;
			}
		}

		.hd-cell {
			padding: 30rpx 0;
			border-top: 1px solid #e5e5e5;

			.hd-cell_label {
				font-size: 30upx;
			}
		}
	}

	.bd {
		padding: 0 30rpx;
		margin-top: 20rpx;
		background-color: white;

		.bd-title {
			font-size: 30rpx;
			line-height: 80rpx;
		}

		.found-cells {
			border-top: 1px solid #e5e5e5;
			padding: 30rpx 20rpx 10rpx;
		}

		.found-cell {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			input {
				padding: 10rpx 20rpx;
				margin-left: 20rpx;
				border: 1px solid #e5e5e5;
				flex: auto;
				height: 80rpx;
			}
		}

		.found-label {
			font-size: 30rpx;
			width: 150rpx;
			text-align: right;
			flex: none;
		}
	}

	.msg {
		padding: 20rpx 40rpx 30rpx;
		line-height: 40rpx;
	}

	.foot-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: white;

		button {
			border-radius: 0;
			height: 120rpx;
			line-height: 120rpx;
			padding-left: 80rpx;
			padding-right: 80rpx;
			background-color: #fe4157;
		}
	}
</style>
